<!-- 学院通知 -->
<template>
  <div class="notice">
    <div class="header">
      <my-header></my-header>
    </div>
    <div class="navbar">
      <my-navbar class="navbarone"></my-navbar>
    </div>
    <div class="swiper">
      <my-swiper></my-swiper>
    </div>

    <div class="article" style="height: 50px">
      <my-article
        newsTitle="学院通知"
        newsType=""
        style="
          height: 430px;
          color: rgb(80, 150, 255);
          font-weight: bold;
          width: 56%;
        "
      >
      </my-article>
    </div>


    <div class="collegenotice" style="height: 350px">
      <div class="noticleimg">
        <p>学院通知</p>
        <span class="notification">2023年通知</span>
      </div>
      <div class="listall" v-if="isNotificationsShown">
        <ul>
          <li v-for="(item, index) in notifications" :key="index" class="notification-item">
            <a class="notification-title" :href="item.link">{{ item.title }}</a>
            <span class="notification-date">{{ item.date }}</span>
          </li>
        </ul>
      </div>
      <!-- 二级路由内容 -->
      <router-view @beforeEnter="handleBeforeEnter" />
    </div>
    

    <div class="article" style="height: 50px">
      <my-article
        newsTitle="友情链接"
        newsType=""
        style="
          height: 430px;
          color: rgb(80, 150, 255);
          font-weight: bold;
          width: 56%;
        "
      >
      </my-article>
    </div>
    <div class="link" style="height: 150px">
      <my-link></my-link>
    </div>
    <div class="footer" style="height: 100px">
      <my-footer></my-footer>
    </div>
  </div>
</template>

<script>
import header from "../components/header/header.vue";
import navbar from "../components/navbar/navbar.vue";
import swiper from "../components/swiper/swiper.vue";
import footer from "../components/footer/footer.vue";
import link from "../components/link/link.vue";
import article from "../components/article/article.vue";
export default {
  components: {
    "my-header": header,
    "my-navbar": navbar,
    "my-swiper": swiper,
    "my-article": article,
    "my-footer": footer,
    "my-link": link,
  },
  data() {
    return {
      showNotifications: true, // 初始状态下显示通知公告列表
      notifications: [
        {
          title: '机械工程学院2023年职业教育活动周 学生技能节获奖学生公示',
          date: '2023-06-01',
          content: '这是第一条通知公告的内容。',
        },
        {
          title: '机械工程学院关于公布第十四届创业大赛结果的 通知',
          date: '2023-06-02',
          content: '这是第二条通知公告的内容。',
        },
        {
          title: '机械工程学院2022-2023第二学期耗材招标公告',
          date: '2023-06-03',
          content: '这是第三条通知公告的内容。',
        },
        {
          title: '惠教泽学，深耕细作——机械工程学院中青年教师教学能力展示',
          date: '2023-06-03',
          content: '这是第三条通知公告的内容。',
        },
        {
          title: '2022年信息学院慕课平台及实训资源采购项目招标公告',
          date: '2023-06-03',
          content: '这是第三条通知公告的内容。',
        },
        {
          title: '机械学院学子在全国3D大赛精英联赛中喜获佳绩',
          date: '2023-06-03',
          content: '这是第三条通知公告的内容。',
        },
        {
          title: '专业解码 | 工业机器人技术专业：未来的“镶钻”金饭碗',
          date: '2023-06-02',
          content: '这是第二条通知公告的内容。',
        },
      ], // 初始化数据列表
      currentNav: '通知公告'
    };
  },
  methods: {
    handleBeforeEnter(to, from, next) {
      if (to.name === '/collegenotice/collegetwo') {
        this.showNotifications = false
      } else {
        this.showNotifications = true
      }
      next()
    },
  },
  computed: {
    isNotificationsShown() {
      const { name } = this.$route
      return name !== 'collegetwo' // 如果当前路由不是通知详情路由，则显示列表
    },
  },
};
</script>

<style  scoped>
.article {
  display: flex;
  justify-content: center;
}
.link {
  display: flex;
  justify-content: center;
}
.collegenotice {
  display: flex;
  margin: 0 auto;
  width: 55%;
}
.noticleimg {
  width: 220px;
  height: 50px;
  background-image: url("../assets/img/bri_lbg.png");
}
.noticleimg p {
  text-align: center;
  font-size: 24px;
  color: #fff;
  line-height: 50px;
}
.listall ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.listall{
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%;
  margin-top: 90px;
}
.listall .notification-item {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.listall .notification-title {
  font-size: 18px;
  color: #333;
  text-decoration: none;
  
}

.listall .notification-title:hover {
  color: #007aff;
}

.listall .notification-date {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}
.notification {
  display: inline-block;
  padding: 15px 48px;
  background-color: #0b6cb8;
  color: #fff;
  border-radius: 5px;
  margin-top: 10px;
}
</style>
